// 地区模糊查询
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Input, InputNumber, DatePicker } from 'antd';

// const {Option} = Select;
const FormItem = Form.Item;
// const { TextArea } = Input;
@Form.create()
class CancelVoidModal extends React.Component {
  handleOk = () => {
    const {
      form: { validateFieldsAndScroll },
    } = this.props;
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { onOk } = this.props;
        onOk(values);
      }
    });
  };

  handleCancle = () => {
    const { onCancel } = this.props;
    onCancel();
  };

  render() {
    const { form, title, visible } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 16 } },
    };
    return (
      <Modal title={title} visible={visible} onOk={this.handleOk} onCancel={this.handleCancle}>
        <div>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="返款金额（元）">
                {getFieldDecorator('refundAmt', {
                  rules: [
                    {
                      required: true,
                      message: '请输入小数点不超过2位的数字返款金额',
                      pattern: /^[0-9]{0,7}(\.[0-9]{1,2})?$/,
                    },
                  ],
                })(<InputNumber placeholder="请输入" step={0.01} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="预计返款时间">
                {getFieldDecorator('refundDate', {
                  rules: [{ required: false, message: '请选择返款时间' }],
                })(<DatePicker />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="汇款方">
                {getFieldDecorator('remitUnitName', {
                  rules: [{ required: false, message: '前输入汇款方' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="返款备注">
                {getFieldDecorator('remark', {
                  rules: [{ required: false, message: '请输入返款备注' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}
export default CancelVoidModal;
